<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/products.css">
    <link rel="stylesheet" href="css/maozhuo_css.css">
    <title>products</title>
</head>

<body>
    <div>
        <div class="denglu">
            <a href=""><button>登录</button></a>
        </div>
        <div class="zhuce">
            <a href=""><button>注册</button></a>
        </div>
    </div>
    <!-- 头部 -->
    <header>
        <!--头部宽度-->
        <div class="content_width">
            <!--logo-->
            <div>
                <h1>
                    <!--头部跳转主页-->
                    <a href="">
                        <img src="img/logo.png" alt="logo未加载">
                    </a>
                </h1>
            </div>
            <!--头部导航-->
            <nav>
                <ul>
                    <!--CONCEPT-->
                    <li>
                        <a href="">概念</a>
                    </li>
                    <!--PRODUCTS-->
                    <li>
                        <a href="">产品展示</a>
                    </li>
                    <!--NEWS-->
                    <li>
                        <a href="">新闻动态</a>
                    </li>
                    <!--STORES-->
                    <li class="zhuanmaidian">
                        <a href="">专卖店</a>
                        <!--专卖店二级导航-->
                        <div class="zhuanmaidian2">
                            <ul>
                                <li><a href=""><span></span>店铺清单</a></li>
                                <li><a href=""><span></span>网上商城</a></li>
                                <li><a href=""><span></span>亚马逊</a></li>
                            </ul>
                        </div>
                        <!--<div class="touming">
                        </div>-->
                    </li>
                    <!--点击菜单-->
                    <li>
                        <div class="dianjicaidan">
                                <div>
                                    <!--样式中加after-->
                                    <span class="dianji"></span>
                                </div>
                            <div>
                                <!--样式中加after-->
                                <span class="dianji"></span>
                            </div>
                            <div>
                                <!--样式中加after-->
                                <span class="dianji"></span>
                            </div>
                        </div>
                        <!--点击后二级导航-->
                        <div>
                            <div class="dianji2">
                                <!--语言-->
                                <div>
                                    <ul>
                                        <li><a href=""><span>中文</span></a></li>
                                        <li><a href=""><span>英语</span></a></li>
                                        <li><a href=""><span>繁体</span></a></li>
                                    </ul>
                                </div>
                                <!--右下Facebook-->
                                <div>
                                    <ul>
                                        <li><a href="">公司</a></li>
                                        <li><a href="">联系</a></li>
                                        <li><a href="">隐私政策</a></li>
                                        <!--图标文字-->
                                        <li><a href=""><span class="iconfont">&#xe60f;</span></a></li>
                                        <li><a href=""><span class="iconfont">&#xe6dc;</span></a></li>
                                    </ul>
                                </div>
                                <div class="zhuanmaidian2">
                                    <ul>
                                        <li><a href=""><span></span>店铺清单</a></li>
                                        <li><a href=""><span></span>网上商城</a></li>
                                        <li><a href=""><span></span>亚马逊</a></li>
                                    </ul>
                                </div>
                            </div>
                            <!--<div class="touming">
    
                            </div>-->
                        </div>
                    </li>
                </ul>
                </nav>
                </div>
    </header>
    <!-- 主体 -->
    <main>
        <section>
            <!-- 控制宽度的div -->
            <div class="content_width">
                <!-- products -->
                <div class="content_title">
                    <h1>PRODUCTS</h1>
                </div>
                <!-- 产品部分 -->
                <div class="product">
                    <!-- 产品1 -->
                    <div>
                        <div class="product_text">
                            <!-- 图标 -->
                            <div class="cat"><img src="images/logo.png" alt=""></div>
                            <div>
                                <a href="">
                                    <h2>KARIMOKU CAT TABLE</h2>
                                    <h4>KARIMOKU 猫桌</h4>
                                    <p>为猫准备的舒适的高架猫桌</p>
                                    <p>￥1，275</p>
                                </a>
                            </div>
                        </div>
                        <div class="product_img"><img src="images/KCT_sum-750x900.jpg" alt=""></div>
                    </div>
                    <!-- 产品二 -->
                    <div>
                        <div class="product_text">
                            <!-- 图标 -->
                            <div class="cat"><img src="images/logo.png" alt=""></div>
                            <div>
                                <a href="">
                                    <h2>KARIMOKU CAT TREE</h2>
                                    <h4>KARIMOKU 猫树</h4>
                                    <p>一种对猫友好且舒适的猫树，从小猫到成年猫都可以长期使用。</p>
                                    <p>￥2，513</p>
                                </a>
                            </div>
                        </div>
                        <div class="product_img"><img src="images/tree-v-750x900.jpg" alt=""></div>
                    </div>
                    <!-- 产品三 -->
                    <div>
                        <div class="product_text">
                            <!-- 图标 -->
                            <div class="cat"><img src="images/logo.png" alt=""></div>
                            <div>
                                <a href="">
                                    <h2>KARIMOKU CAT BED</h2>
                                    <h4>KARIMOKU 猫床</h4>
                                    <p>仅限猫用的床，形状柔软，可最大程度地发挥木材的魅力。</p>
                                    <p>￥1，881</p>
                                </a>
                            </div>
                        </div>
                        <div class="product_img"><img src="images/bed-v-750x900.jpg" alt=""></div>
                    </div>
                    <!-- 产品四 -->
                    <div>
                        <div class="product_text">
                            <!-- 图标 -->
                            <div class="cat"><img src="images/logo.png" alt=""></div>
                            <div>
                                <a href="">
                                    <h2>KARIMOKU CAT RESTROOM</h2>
                                    <h4>KARIMOKU 猫咪卫生间</h4>
                                    <p>这是一款安置猫厕收纳家具，可融入空间而不会让人感到厕所的存在。</p>
                                    <p>￥2，917</p>
                                </a>
                            </div>
                        </div>
                        <div class="product_img"><img src="images/restroom-v-750x900.jpg" alt=""></div>
                    </div>
                </div>
            </div>
        </section>
    </main>
    <!-- 底部 -->
    <footer>
        <!--  <div class="jiaobubj">-->
          <div class="content_width">
              <!--脚部店铺框-->
              <div>
                  <ul>
                      <li>
                          <a href="">
                              店铺
                              <span class="iconfont"></span>
                          </a>
                      </li>
                      <li>
                          <a href="">
                              店铺清单
                              <span class="iconfont">&#xe698;</span>
                          </a>
                      </li>
                      <li>
                          <a href="">
                              网上商城
                              <span class="iconfont">&#xe669;</span>
                          </a>
                      </li>
                      <li>
                          <a href="">
                              亚马逊
                              <span class="iconfont">&#xe61e;</span>
                          </a>
                      </li>
                  </ul>
              </div>
              <!--底部语言与跳转-->
              <div class="language">
                  <ul>
                      <li>语言:</li>
                      <li>中文</li>
                      <li>英语</li>
                      <li>繁体</li>
                  </ul>
              </div>
              <div class="biao">
                  <table>
                      <tr>
                          <td><a href="">家</a></td>
                          <td><a href="">公司</a></td>
                      </tr>
                      <tr>
                          <td><a href="">概念</a></td>
                          <td><a href="">联系</a></td>
                      </tr>
                      <tr>
                          <td><a href="">产品展示</a></td>
                          <td><a href="">隐私政策</a></td>
                      </tr>
                      <tr>
                          <td><a href="">新闻动态</a></td>
                          <td class="face">
                              <a href="">
                              <span class="iconfont">&#xe60f;</span>
                              </a>
                              <a href="">
                              <span class="iconfont">&#xe6dc;</span>
                              </a>
                          </td>
                      </tr>
                      <tr>
                          <td style="color: white"><a href="">店铺清单</a></td>
                      </tr>
                  </table>
              </div>
              <div class="banquan">
                  <p style="color: #656565">分级为4 +©2020 KARIMOKU CAT</p>
              </div>
          </div>
        <!--  </div>-->
      </footer>
</body>

</html>